<!--
 * @Author: lp
 * @Date: 2022-02-08 13:53:32
 * @LastEditTime: 2022-06-07 10:16:39
 * @LastEditors: lp 654528967@qq.com
 * @Description: 自定义搜索表单
 * @FilePath: \nien-vue3-admin\src\components\customForm\index.vue
-->
<script lang="tsx">
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import { ref, unref, watchEffect } from 'vue'
import { ClickOutside, ElMessage } from 'element-plus'
import localforage from 'localforage'
import { pxToRem } from '@/utils'

export default {
  directives: { ClickOutside },
  props: {
    options: {
      default: () => ({}),
      type: Object,
    },
    popoverRef: { 
      default: () => ({}),
      type: Object, 
    },
    customKey: {
      default: null,
      type: String,
    },
    formDbIsReady: {
      default: false,
      type: Boolean,
    },
    extend: {
      default: false,
      type: Boolean,
    },
    columnCount: {
      default: 3,
      type: Number,
    },
  },
  emits: ['resetQuery', 'getList', 'handleCustorm', 'putAway'],
  setup(props) {
    const onClickOutside = () => {
      unref(props.popoverRef).popperRef?.delayHide?.()
    }
    const customFormOptions = ref<Array<any>>([])
    // 判断是否使用数据库配置还是使用原本表单数据
    const customFormErr = ref<boolean>(true)
    const reFreshCustomFO = () => {
      if (props.customKey) {
        const indexDbName = `${ props.customKey }-form`
        localforage.getItem(indexDbName).then((fields: [object]) => {
          if (fields === null) {
            ElMessage.error('搜索字段表出错')
            customFormErr.value = true
          } else {
            customFormOptions.value = fields
            customFormErr.value = false
          }
        })
      } else {
        customFormErr.value = true
      }
    }
    watchEffect(() => {
      if (props.formDbIsReady) {
        reFreshCustomFO()
      }
    })
    return { onClickOutside, reFreshCustomFO, customFormOptions, customFormErr }
  },
  render() {
    let fields = this.options.fields
    if (!this.customFormErr) {
      const children = []
      for (const item of this.customFormOptions) {
        if (!item.show) continue
        children.push(this.options.fields[item.id])
      }
      fields = children
    }
    return (
      <el-form ref="queryForm" model={this.options.queryParams} {...{ labelWidth: pxToRem('94px'), ...this.options.formOption }} inline>
        <el-row>
          { 
            fields.map(({ prop, label, rule, type, option: { modifier, ...option } = { modifier: undefined } }, index) => {
              const modelModifiers = {}
              if (modifier) {
                modelModifiers[modifier] = true
              }
              return (
                <el-col v-show={this.extend || index <= this.columnCount - 2} xs={24} sm={8} lg={8} xl={6} key={prop}>
                  <el-form-item style="width:100%" prop={prop} label={label} rule={rule}>
                    <customInput option={option} type={type} modelModifiers={modelModifiers} v-model={this.options.queryParams[prop]} />
                  </el-form-item>
                </el-col>
              )
            }) 
          }
          <div class="query-operation el-form-item__label">
            <el-button type="info" onClick={() => this.$emit('resetQuery')}>
              {this.$t('public.reset')}
            </el-button>
            <el-button type="primary" onClick={() => this.$emit('getList')}>
              {this.$t('public.search')}
            </el-button>
            {this.customKey && !this.customFormErr && (
              <el-button text class="custorm-operation" ref="custormBtnRef" onClick={() => this.$emit('handleCustorm')} v-click-outside={this.onClickOutside}>
                {this.$t('public.custom')}
                <svg-icon color="#000" name="menu-1" />
              </el-button>
            )}

            <div class="put-away">
              <el-button text onClick={() => this.$emit('putAway')}>
                {this.extend ? this.$t('public.putAway') : this.$t('public.open')}
                <el-icon class="el-icon--right">
                  { this.extend ? <ArrowUp /> : <ArrowDown />}
                </el-icon>
              </el-button>
            </div>
          </div>
        </el-row>
      </el-form>
    )
  },
}
</script>
<style lang="less" scoped>
@el-form-item--default-mb: 16px;
.el-form-item--default {
  margin-bottom: @el-form-item--default-mb;
}
.el-form {
  & > .el-row {
    width: 100%;
    align-items: center;
  }
}
.query-operation {
  display: inline-block;
  flex: 1;
  margin-bottom: @el-form-item--default-mb;
  &.el-form-item__label {
    text-align: right;
    padding: 0;
  }
}
.custorm-operation {
  color: #000;
  font-size: 14px;
  padding: 8px 10px;
  svg {
    margin-left: 5px;
    height: 16px;
    width: 16px;
  }
}
.put-away {
  display: inline-block;
  position: relative;
  margin-left: 20px;
  .el-button {
    padding: 8px 0 10px;
  }
}
.put-away::before {
  content: "";
  position: absolute;
  width: 1px;
  height: 14px;
  background-color: #e3e6ed;
  top: 50%;
  transform: translateY(-45%);
  left: -10px;
}
</style>
